<template>
  <a-card>
    <div class="table-page-search-wrapper">
      <a-form-model
        layout="inline"
        :model="queryParam"
      >
        <a-row :gutter="15">
          <a-col :md="6" :sm="24">
            <a-form-model-item label="合同编号">
              <a-input v-model="queryParam['filter[business_name]']" placeholder="请输入合同编号" />
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-model-item label="商标名称">
              <a-input v-model="queryParam['filter[contract_no]']" placeholder="请输入商标名称" />
            </a-form-model-item>
          </a-col>
          <template v-if="advanced">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="业务编号">
                <a-input v-model="queryParam['filter[business_no]']" placeholder="请输入业务编号" />
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="开启时间">
                <a-range-picker @change="onChangeTime" />
              </a-form-item>
            </a-col>
            <!--              <a-col :md="6" :sm="24">-->
            <!--                <a-form-item label="领取时间">-->
            <!--                  <a-range-picker @change="onChangeReceive" />-->
            <!--                </a-form-item>-->
            <!--              </a-col>-->
            <a-col :md="6" :sm="24">
              <a-form-model-item label="所属顾问">
                <a-select
                  show-search
                  v-model="queryParam['filter[adviser_uid]']"
                  placeholder="输入要搜索的顾问姓名"
                  :default-active-first-option="false"
                  :show-arrow="false"
                  :filter-option="false"
                  :not-found-content="null"
                  @search="onSearch"
                >
                  <a-select-option v-for="(item,index) in searchSource" :key="index" :value="index">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </template>
          <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class='table-page-search-submitButtons' :style="advanced && { float: 'right', overflow: 'hidden' } || {}">
                <a-button type="primary" @click="$refs.table.refresh(true)">搜索</a-button>
                <a-button style="margin-left: 8px" @click="reset">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <div class="table-operator">
      <s-table
        bordered
        ref="table"
        :columns="tradeColumns"
        :data="licenseData"
      >
        <div slot="title">
          <a-button type="primary" size="small">批量上传</a-button>
          <a-button type="primary" size="small">导入已付官费数据</a-button>
        </div>
        <template slot="contract_no" slot-scope="text,record">
          <a-popover trigger="hover">
            <template slot="content">
              <p>合同编号：{{text}}<a-divider type="vertical" /><a-icon class="copy" :data-clipboard-text="text" type="copy" @click="copy" /></p>
              <p>业务编号：{{record.business_no}}<a-divider type="vertical" /><a-icon class="copy" :data-clipboard-text="record.business_no" type="copy" @click="copy" /></p>
            </template>
            {{text}}<br>
            {{record.business_no}}
          </a-popover>
        </template>
        <template slot="adviser" slot-scope="text, record">
          <a-tag>{{text}}</a-tag><br>
          <a-tag>{{record.group_type}}组</a-tag><br>
          <a-tag>{{record.leader}}</a-tag>
        </template>
        <template slot="trademark_number" slot-scope="text">
          <a-input placeholder="" :value="text" />
        </template>
        <template slot="action">
          <a-button size="small" type="primary" @click="trademarkShow = true">编辑</a-button>
          <a-button size="small" type="danger" @click="receiptShow = true">回执管理</a-button>
          <a-button size="small" type="default">查看</a-button>
        </template>
        <template slot="upload_receipt" slot-scope="text">
          <a>{{text}}</a>
        </template>
        <template slot="status" slot-scope="text">
          <a-tag color="red">{{text}}</a-tag>
        </template>
        <template slot="status2" slot-scope="text">
          <a-tag color="red">{{text}}</a-tag>
        </template>
        <template slot="offcial_fees_paid" slot-scope="text">
          <a-tag color="red">{{text}}元</a-tag><br>
        </template>
      </s-table>
    </div>
    <a-modal
      centered
      title="商标业务"
      :confirm-loading="loading"
      v-model="trademarkShow"
      @ok="trademarkOk"
    >
      <a-form-model :label-col="tklabelCol" :wrapper-col="tkwrapperCol">
        <a-form-model-item label="商标名称" >
          <a-input type="text" placeholder="请输入商标名称" />
        </a-form-model-item>
        <a-form-model-item label="商标类别" >
          <a-input type="text" placeholder="请输入商标类别" />
        </a-form-model-item>
        <a-form-model-item label="商标注册号" >
          <a-input type="text" placeholder="请输入商标注册号" />
        </a-form-model-item>
        <a-form-model-item label="官方申请号" >
          <a-input type="text" placeholder="请输入官方申请号" />
        </a-form-model-item>
        <a-form-model-item label="已付官费" >
          <a-input type="text" placeholder="请输入已付官费" />
        </a-form-model-item>
        <a-form-model-item label="付款时间" >
          <a-input type="text" placeholder="请输入付款时间" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      centered
      title="商标-回执管理"
      width="900px"
      :confirm-loading="loading"
      v-model="receiptShow"
      @ok="receiptOk"
    >
      <a-row :gutter="10">
        <a-col :span="14">
          <div style="margin-bottom: 20px;">历史回执记录</div>
          <a-timeline>
            <a-timeline-item>
              暂无
            </a-timeline-item>
          </a-timeline>
        </a-col>
        <a-col :span="10">
          <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item label="添加申请号">
              <a-input placeholder="请输入申请号" />
            </a-form-model-item>
            <a-form-model-item label="添加回执">
              <a-checkbox-group>
                <a-row :gutter="[16,8]">
                  <a-col>
                    <a-checkbox value="1">
                      提交
                    </a-checkbox>
                  </a-col>
                  <a-col>
                    <a-checkbox value="2">
                      受理
                    </a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </a-form-model-item>
            <a-form-model-item label="上传文件">
              <a-upload
                name="file"
                :multiple="true"
                :headers="headers"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                :show-upload-list="false"
                @change="downChange"
              >
                <a-button size="small" icon="upload" type="primary">选择文件</a-button>
              </a-upload>
            </a-form-model-item>
          </a-form-model>
        </a-col>
      </a-row>
    </a-modal>
    <a-modal
      centered
      title="重置业务流程状态"
      :confirm-loading="loading"
      v-model="stateShow"
      @ok="stateOk"
    >
      <a-radio value="待提交" @change="onChange">材料待提交</a-radio>
    </a-modal>
  </a-card>
</template>

<script>
  import { STable } from '@/components'
  import { onCompletionAdviser } from '@/api/patent.process'
  import trademarkColumns from '@/columns/tm.process'
  import storage from 'store'
  import { ACCESS_TOKEN } from '@/store/mutation-types'

  export default {
    name: 'Trademark',
    components: {
      STable
    },
    data () {
      return {
        headers: {
          'Access-Token': storage.get(ACCESS_TOKEN)
        },
        // 多选框样式
        checkStyle: {
          display: 'block',
          height: '40px',
          lineHeight: '40px'
        },
        // 表单输入控件样式
        tklabelCol: { span: 4 },
        tkwrapperCol: { span: 14, offset: 1 },
        labelCol: { span: 8 },
        wrapperCol: { span: 14, offset: 1 },
        // 确定按钮加载事件
        loading: false,
        advanced: true,
        // 控制编辑弹窗显示/隐藏
        trademarkShow: false,
        // 控制回执弹窗显示/隐藏
        receiptShow: false,
        // 控制状态弹窗显示/隐藏
        stateShow: false,
        queryParam: {},
        searchSource: [],
        tradeColumns: trademarkColumns.tradeinformation,
        licenseData: () => {
          return new Promise(resolve => {
            resolve({
              data: [
                {
                  trademark_name: '橘子食堂',
                  business_name: '24/撰写加急',
                  contract_no: 'HT1586423544',
                  business_no: 'HT1586423544',
                  trademark_number: 'HTX1254564131',
                  open_item: '2021-12-03  16:28:25',
                  upload_receipt: 'HTX12154154',
                  offcial_fees_paid: '2500',
                  status: '驳回',
                  status2: '已提交至官方',
                  payment_time: '2021-12-03  16:28:25'
                },
                {
                  trademark_name: '黑子食堂',
                  business_name: '24/撰写加急',
                  contract_no: 'HT1586423544',
                  business_no: 'HT25846444',
                  trademark_number: 'HTX2254564131',
                  open_item: '2021-12-03  16:28:25',
                  upload_receipt: 'HTX7598464',
                  offcial_fees_paid: '4584',
                  status: '驳回',
                  status2: '已提交至官方',
                  payment_time: '2021-12-03  16:28:25'
                },
                {
                  trademark_name: '鹏鹏食堂',
                  business_name: '24/撰写加急',
                  contract_no: 'HT1586423544',
                  business_no: 'HT25846444',
                  trademark_number: 'HTX2254564131',
                  open_item: '2021-12-03  16:28:25',
                  upload_receipt: 'HTX7598464',
                  offcial_fees_paid: '2564',
                  status: '驳回',
                  status2: '已提交至官方',
                  payment_time: '2021-12-03  16:28:25'
                },
                {
                  trademark_name: '强子食堂',
                  business_name: '24/撰写加急',
                  contract_no: 'HT454646423544',
                  business_no: 'HT25581654444',
                  trademark_number: 'HTX2254564431',
                  open_item: '2021-12-03  16:28:25',
                  upload_receipt: 'HTX7598464',
                  offcial_fees_paid: '3000',
                  status: '驳回',
                  status2: '已提交至官方',
                  payment_time: '2021-12-03  16:28:25'
                }
              ]
            })
          })
        }
      }
    },
    methods: {
      toggleAdvanced () {
        this.advanced = !this.advanced
      },
      reset () {
        this.queryParam = {}
      },
      onChangeTime (date, dateString) {
        this.queryParam['filter[open_time_start]'] = dateString[0]
        this.queryParam['filter[open_time_end]'] = dateString[1]
      },
      onSearch (searchText) {
        onCompletionAdviser(searchText).then(res => {
          this.searchSource = res.result.data
        })
      },
      // 编辑弹窗确定按钮事件
      trademarkOk () {
        this.trademarkShow = false
      },
      // 回执弹窗确定按钮事件
      receiptOk () {
        this.receiptShow = false
      },
      // 状态弹窗确定按钮事件
      stateOk () {
        this.stateShow = false
      },
      // 状态单选按钮
      onChange (e) {
        console.log(e.target.value)
      },
      // 文件上传
      downChange (info) {
        if (info.file.status === 'uploading') {
          return false
        }
        if (info.file.status === 'done') {
          this.$message.success(`${info.file.name} file uploaded successfully`)
        } else if (info.file.status === 'error') {
          this.$message.error(`${info.file.name} file upload failed.`)
        }
      }
    }
  }
</script>

<style scoped>

</style>
